<template>
  <!--  -->
  <!-- 文件预览：文件下载 -->
  <!--  -->

  <div class="others">
    <div class="body-content">
        <!-- 图标 -->
        <div><Icon :iconName="fileInfo.fileType == 9 ? 'zip' : 'others'"></Icon></div>
        <!-- 文件名 -->
        <div class="file-name">{{ fileInfo.fileName }}</div>
        <!-- 提示 -->
        <div class="tips">该类型的文件暂不支持预览，请下载后查看</div>
        <!-- 下载按钮 -->
        <div class="download-btn">
            <el-button type="primary" @click="download">点击下载{{ proxy.Utils.size2Str(fileInfo.fileSize) }}</el-button>
        </div>
    </div>
  </div>
  
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, computed, onUnmounted } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
    createDownloadUrl: {
        type: String,
    },

    downloadUrl: {
        type: String,
    },

    fileInfo: {
        type: Object,
    },
});


//文件下载
const download = async () => {
    let result = await proxy.Request({
        url: props.createDownloadUrl,    //获取code
    });
    if (!result) {
        return;
    }
    window.location.href = props.downloadUrl + "/" + "result.data.downloadDto.downloadCode";  //下载
}

</script>

<style lang="scss" scoped>
.others {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .body-content {
        text-align: center;
        .file-name {
            font-weight: bold;
        }
        .tips {
            color: #999898;
            margin-top: 5px;
            font-size: 13px;
        }
        .download-btn {
            margin-top: 20px;
        }
    }
}

</style>